<template>
  <div class="status-list">
    <div
      v-for="(item, index) in tabs" :key="index" :style="{ color: item.color || defaultColor }" :class="{ active: active === index }"
      @click="handleTabClick(item, index)"
    >
      <span>{{ item.label }}</span>
      <span :style="{ color: item.valueColor || item.color || defaultColor }">
        {{ item.value }}
      </span>
    </div>
  </div>
</template>

<script setup>
/**
 * --------------------------------------------------------------------
 * Component: 通用状态Tab组件
 * ----------------------------------------------------------------------
 * Description: 可配置的状态标签组件，支持动态颜色和点击事件
 * ----------------------------------------------------------------------
 * Author: Eric E-mail: <huaboli1314@163.com>
 * ----------------------------------------------------------------------
 */

defineProps({
  // Tab项数据
  tabs: {
    type: Array,
    required: true,
  },
  // 默认颜色
  defaultColor: {
    type: String,
    default: '#111',
  },
  // 当前激活的索引
  active: {
    type: Number,
    default: -1,
  },
})

const emit = defineEmits(['change', 'update:active'])

// 处理tab点击事件
function handleTabClick(item, index) {
  emit('update:active', index)
  emit('change', item, index)
}
</script>

<style lang="less" scoped>
.status-list {
  display: flex;
  align-items: center;
  height: 100%;

  & > div {
    margin-right: 20px;
    font-size: 14px;
    color: #111;
    cursor: pointer;
    transition: all 0.3s ease;

    &.active {
      position: relative;
      font-weight: 600;

      &::after {
        position: absolute;
        bottom: -17px;
        left: 0;
        width: 100%;
        height: 2px;
        content: '';
        background-color: #165dff;
      }
    }

    &:hover {
      opacity: 0.8;
    }

    & span {
      margin-right: 5px;
    }
  }
}
</style>
